﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/city-picker.css" rel="stylesheet" />
<link href="~/Content/main.css" rel="stylesheet" />

<script src="~/Scripts/city-picker.data.js"></script>
<!--bootstrap-->
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<!--jq grid-->
<link href="@Url.Content("~/Scripts/Jqgrid/src/css/ui.jqgrid.css")" rel="stylesheet" />
<link href="~/Content/themes/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/themes/jquery-ui.theme.css" rel="stylesheet" />

<script src="~/Scripts/Jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/Jqgrid/js/i18n/grid.locale-cn.js"></script>
@*<script type="text/javascript">
        //var ChineseDistricts = GetCitys();
        //function GetCitys() {

        //    $.ajax({
        //        type: "get",
        //        url: "/Trial/GetProvince",
        //        success: function (data) {
        //            ChineseDistricts = data;
        //        }
        //    })
        //}
        var ChineseDistricts = {
            86: {
                'A-Z': [
                    { code: '340000', address: '安徽省' },
                    { code: '110000', address: '北京市' },
                    { code: '500000', address: '重庆市' },
                    { code: '350000', address: '福建省' },
                    { code: '620000', address: '甘肃省' },
                    { code: '440000', address: '广东省' },
                    { code: '450000', address: '广西壮族自治区' },
                    { code: '520000', address: '贵州省' }],
                'H-K': [
                    { code: '460000', address: '海南省' },
                    { code: '130000', address: '河北省' },
                    { code: '230000', address: '黑龙江省' },
                    { code: '410000', address: '河南省' },
                    { code: '420000', address: '湖北省' },
                    { code: '430000', address: '湖南省' },
                    { code: '320000', address: '江苏省' },
                    { code: '360000', address: '江西省' },
                    { code: '220000', address: '吉林省' }],
                'L-S': [
                    { code: '210000', address: '辽宁省' },
                    { code: '150000', address: '内蒙古自治区' },
                    { code: '640000', address: '宁夏回族自治区' },
                    { code: '630000', address: '青海省' },
                    { code: '370000', address: '山东省' },
                    { code: '310000', address: '上海市' },
                    { code: '140000', address: '山西省' },
                    { code: '610000', address: '陕西省' },
                    { code: '510000', address: '四川省' }],
                'T-Z': [
                    { code: '120000', address: '天津市' },
                    { code: '650000', address: '新疆维吾尔自治区' },
                    { code: '540000', address: '西藏自治区' },
                    { code: '530000', address: '云南省' },
                    { code: '330000', address: '浙江省' }]
            },
        }

        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "../Scripts/city-picker.js";
        head.appendChild(script);
    </script>*@
<div class="mainCont">
    <label style="width: 80px; padding: 9px 0;font-weight: normal;float:left ">选择地点:</label>
    <input readonly onclick="$('.cityContent').css('display', 'block')" id="ipt_cityname" placeholder="点击从下拉面板中选择省份" style="padding-top:10px" />
    <input type="hidden" id="ProvinceId" value="0" />
    <div class="cityContent" style="display:none;margin-left:45px;">
        <ul>
            <li>
                <a href="#none" data-value="51801">北京</a>
            </li>
            <li>
                <a href="#none" data-value="51802">北京1</a>
            </li>
            <li>
                <a href="#none" data-value="51803">北京2</a>
            </li>
            <li>
                <a href="#none" data-value="51804">北京3</a>
            </li>
            <li>
                <a href="#none" data-value="51805">北京4</a>
            </li>
        </ul>
        <button type="button" class="btn btn-primary" id="btnCitySelect" style="margin-left:150px">确认</button>
    </div>
    <div class="dashed" style="border-bottom:3px dashed #e5e5e5;margin:10px"></div>
    <div>
        <label style="display:inline-block;width: 80px; padding: 9px 0;font-weight: normal; ">选择产品</label>
        <input type="text" id="ProductName" value="" placeholder="请输入" class="autocomplete" />
        <input type="hidden" id="Productid" />
    </div>
    <div class="dashed" style="border-bottom:3px dashed #e5e5e5;margin:10px"></div>
    <div>
        <label style="display:inline-block;width: 80px; padding: 9px 0;font-weight: normal; ">选择农作物</label>
        <input type="text" id="CorptName" value="" placeholder="请输入" class="autocomplete" />
        <input type="hidden" id="Corptid" />
    </div>
    <div class="dashed" style="border-bottom:3px dashed #e5e5e5;margin:10px"></div>
    <div>
        <label style="display:inline-block;width: 80px; padding: 9px 0;font-weight: normal;float:left ">状态</label>
        <ul class="state nav nav-pills">
            <li><a href="#" id="progess">正在进行</a></li>
            <li><a href="#" id="submit">已提交</a></li>
            <li><a href="#" id="finish">已完成</a></li>
        </ul>
    </div>
    <div class="searchCont">
        <!-- jqGrid table list4 -->
        <table id="list4"></table>
        <!-- jqGrid 分页 div gridPager -->
        <div id="gridPager"></div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('ul.state > li').click(function (e) {
            e.preventDefault();
            $('ul.state > li').removeClass('active');
            $(this).addClass('active');
            if (this.firstElementChild.id == "progess") {
                jQuery("#list4").setGridParam().hideCol("SubmitDate").trigger("reloadGrid");
            } else {
                jQuery("#list4").setGridParam().showCol("SubmitDate").trigger("reloadGrid");
            }
        });

    });
    function GridBtnAdd(type) {
        var _id = type.split('?');
        var reminder = "<a href='javascript:Reminder(\"" + _id[1] + "\");' class='gridBtn  btn btn-default'>提醒</a>",
         approveBtn = "<a href='javascript:Approve(\"" + _id[1] + "\");' class='gridBtn btn btn-default'>批准</a>",
        rejectBtn = "<a href='javascript:DisApprove(\"" + _id[1] + "\");' class='gridBtn btn btn-default'>退回</a>";
        if (_id[0] == 0) {
            return reminder;
        } else if (_id[0] == 1) {
            return approveBtn + rejectBtn;
        }
        else {
            return "";
        }

    }
    $().ready(function () {
        $("#list4").jqGrid({
            url: "../api/Trial/GetAllWork",
            Regional: "cn",
            datatype: "json", //数据来源，本地数据
            mtype: "GET",//提交方式
            height: "auto",//高度，表格高度。可为数值、百分比或'auto'
            //width:1000,//这个宽度不能为百分比
            autowidth: true,//自动宽
            colNames: ['产品', '农作物', '实验员', '城市', '创建时间', '提交时间', ''],
            colModel: [
                //{name:'id',index:'id', width:'10%', align:'center' },
                { name: 'Procuct', index: 'Procuct', width: '5%', align: 'center' },
                { name: 'Crop', index: 'Crop', width: '5%', align: 'center' },
                { name: 'Promoter', index: 'Promoter', width: '5%', align: "center" },
                { name: 'City', index: 'City', width: '5%', align: "center", sortable: false },
                { name: 'CreateDate', index: 'CreateDate', width: '5%', align: "center", sortable: false },
                { name: 'SubmitDate', index: 'SubmitDate', width: '5%', align: "center", sortable: false, hidden: true },
                { name: 'Operation', index: 'Operation', width: '5%', align: "center", sortable: false, formatter: function (value, grid, rows, state) { return GridBtnAdd(value); } }
            ],
            //rownumbers: true,//添加左侧行号
            //altRows:true,//设置为交替行表格,默认为false
            //sortname:'createDate',
            //sortorder:'asc',
            viewrecords: true,//是否在浏览导航栏显示记录总数
            rowNum: 15,//每页显示记录数
            rowList: [15, 20, 25],//用于改变显示行数的下拉列表框的元素数组。
            jsonReader: {
                id: "Operation",
                //root: function (obj) {
                //    var data = eval("(" + obj + ")");
                //    return eval(data.rows);
                //},
                //page: function (obj) {
                //    var data = eval("(" + obj + ")");
                //    return data.page;
                //},
                //total: function (obj) {
                //    var data = eval("(" + obj + ")");
                //    return data.total;
                //},
                //records: function (obj) {
                //    var data = eval("(" + obj + ")");
                //    return data.records;
                //},
            },
            onSortCol: function (index, colindex, sortorder) {
                //列排序事件，向server传值，值为当前的页数
                jQuery("#list4").jqGrid('setGridParam', { page: $('#gridPager').val() });
            },
            loadonce: true,
            pagination: true,
            pager: $('#gridPager')
        });
        //JQ grid 自适应宽度
        $(window).resize(function () {

            $("#list4").setGridWidth($('.searchCont').width() * 0.99);

        });
    })
</script>
<style type="text/css">
    .mainCont {
        position: absolute;
        left: 200px;
        /*right: 30px;*/
        top: 100px;
        padding-right: 20px;
        /*min-width: 940px;*/
        overflow: hidden;
        width: 80%;
    }

    .cityContent ul {
        list-style: none;
        width: 250px;
        margin-top: 10px;
    }

    .cityContent li {
        display: inline-block;
        width: 60px;
    }

    .cityContent ul li a {
        color: #005aa0;
        text-decoration: none;
    }

    .cityContent li a:hover {
        background: #005aa0;
        color: #fff;
    }

    .cityContent li a.active {
        background: #005aa0;
        color: #fff;
    }

    #ipt_cityname {
        border: none;
    }

    .ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column, .ui-pg-table, .ui-state-highlight {
        height: 42px;
        background-color: #f3faff;
        border: none;
    }
</style>

<script>
    $().ready(function () {
        $(".cityContent li a").click(function () {
            $(".cityContent li a").removeClass("active");
            $(this).addClass("active");
        })
        $("#btnCitySelect").click(function () {
            $('.cityContent').css('display', 'none');
            if ($(".cityContent li a.active").text() != "") {
                $("#ipt_cityname").attr("placeholder", $(".cityContent li a.active").text());
                $("ProvinceId").val($(".cityContent li a.active").data("value"));
            } else {
                $("#ipt_cityname").attr("placeholder", "点击从下拉面板中选择省份");
                $("ProvinceId").val(0);
            }
        })
    })

    function AutoCompleteProduct() {
        $.getJSON("../api/event/GetAllCitys", function (data) {
            var metaData = JSON.parse(data);
            //metaData = JSON.stringify(data);
            $("#City").autocomplete({
                source: metaData,
                minLength: 1,
                delay: 500,
                select: function (event, ui) {
                    var value = ui.item.label;
                    var id = ui.item.id;
                    $("#" + event.target.id).val(value);
                    $("#" + event.target.id + "_val").val(id);

                },
                change: function (event, ui) {
                    $(this).val((ui.item ? ui.item.value : ""));
                    $("#" + this.id + "_val").val((ui.item ? ui.item.id : ""))
                },
                close: function () {
                    _thisComplete = false;
                },
                response: function (event, ui) {
                    if (ui.content.length == 0) {
                        ui.content.push({ label: '没有匹配到任何结果', value: '' });
                    }
                }
            });
        })
    }
</script>